<!DOCTYPE HTML>
<html lang="en-US">
    <head>

        <meta charset="UTF-8">
        <title>Beoro Admin Template v1.1</title>
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <link rel="icon" type="image/ico" href="favicon.ico">
        
    <!-- common stylesheets-->
        <!-- bootstrap framework css -->
            <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
            <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
        <!-- iconSweet2 icon pack (16x16) -->
            <link rel="stylesheet" href="img/icsw2_16/icsw2_16.css">
        <!-- splashy icon pack -->
            <link rel="stylesheet" href="img/splashy/splashy.css">
        <!-- flag icons -->
            <link rel="stylesheet" href="img/flags/flags.css">
        <!-- power tooltips -->
            <link rel="stylesheet" href="js/lib/powertip/jquery.powertip.css">
        <!-- google web fonts -->
            
            

    <!-- aditional stylesheets -->
        <!-- x-editable -->
            <link rel="stylesheet" href="js/lib/x-editable/bootstrap-editable/css/bootstrap-editable.css">
            <link rel="stylesheet" href="js/lib/x-editable/inputs-ext/address/address.css">


        <!-- main stylesheet -->
            <link rel="stylesheet" href="css/beoro.css">

        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
        <!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->
            
        <!--[if lt IE 9]>
            <script src="js/ie/html5shiv.min.js"></script>
            <script src="js/ie/respond.min.js"></script>
            <script src="js/lib/flot-charts/excanvas.min.js"></script>
        <![endif]-->

    </head>
    <body class="bg_d">
    <!-- main wrapper (without footer) -->    
        <div class="main-wrapper">
        <!-- top bar -->
            <div class="navbar navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container">
                        <div class="pull-right top-search">
                            <form action="" >
                                <input type="text" name="q" id="q-main">
                                <button class="btn"><i class="icon-search"></i></button>
                            </form>
                        </div>
                        <div id="fade-menu" class="pull-left">
                            <ul class="clearfix" id="mobile-nav">
                                <li>
                                    <a href="javascript:void(0)">Forms</a>
                                    <ul>
                                        <li>
                                            <a href="form_elements.html">Form elements</a>
                                        </li>
                                        <li>
                                            <a href="form_validation.html">Form validation</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0)">Components</a>
                                    <ul>
                                        <li>
                                            <a href="calendar.html">Calendar</a>
                                        </li>
                                        <li>
                                            <a href="charts.html">Charts</a>
                                        </li>
                                        <li>
                                            <a href="contact_list.html">Contact List</a>
                                        </li>
                                        <li>
                                            <a href="datatables.html">Datatables</a>
                                        </li>
                                        <li>
                                            <a href="editable_elements.html">Editable Elements</a>
                                        </li>
                                        <li>
                                            <a href="file_manager.html">File manager</a>
                                        </li>
                                        <li>
                                            <a href="gallery.html">Gallery</a>
                                        </li>
                                        <li>
                                            <a href="gmaps.html">Google Maps</a>
                                        </li>
                                        <li>
                                            <a href="#">Tables</a>
                                            <ul>
                                                <li><a href="tables_regular.html">Regular Tables</a></li>
                                                <li><a href="table_stacking.html">Stacking Table</a></li>
                                                <li><a href="table_examples.html">Table examples</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="wizard.html">Wizard</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0)">UI Elements</a>
                                    <ul>
                                        <li><a href="alerts_buttons.html">Alerts, Buttons</a></li>
                                        <li><a href="grid.html">Grid</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li>
                                            <a href="notifications.html">Notifications</a>
                                        </li>
                                        <li><a href="tabs_accordions.html">Tabs, Accordions</a></li>
                                        <li><a href="tooltips_popovers.html">Tooltips, Popovers</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="widgets.html">Widgets</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0)">Other pages</a>
                                    <ul>
                                        <li><a href="ajax_content.html">Ajax content</a></li>
                                        <li><a href="blank.html">Blank page</a></li>
                                        <li><a href="blog_page.html">Blog page</a></li>
                                        <li><a href="blog_page_single.html">Blog page (single)</a></li>
                                        <li><a href="error_404.html">Error 404</a></li>
                                        <li><a href="help_faq.html">Help/Faq</a></li>
                                        <li><a href="invoices.html">Invoices</a></li>
                                        <li><a href="login.html">Login Page</a></li>
                                        <li><a href="mailbox.html">Mailbox</a></li>
                                        <li><a href="user_profile.html">User profile</a></li>
                                        <li><a href="settings.html">Site Settings</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0)">Sub-menu</a>
                                    <ul>
                                        <li><a href="#">Section 1</a></li>
                                        <li><a href="#">Section 2</a></li>
                                        <li><a href="#">Section 3</a></li>
                                        <li>
                                            <a href="#">Section 4</a>
                                            <ul>
                                                <li><a href="#">Section 4.1</a></li>
                                                <li><a href="#">Section 4.2</a></li>
                                                <li><a href="#">Section 4.3</a></li>
                                                <li>
                                                    <a href="#">Section 4.4</a>
                                                    <ul>
                                                        <li><a href="#">Section 4.4.1</a></li>
                                                        <li><a href="#">Section 4.4.2</a></li>
                                                        <li><a href="#">Section 4.4.4</a></li>
                                                        <li><a href="#">Section 4.4.5</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Section5</a></li>
                                        <li><a href="#">Section6</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        <!-- header -->
            <header>
                <div class="container">
                    <div class="row">
                        <div class="span3">
                            <div class="main-logo"><a href="dashboard.html"><img src="img/beoro_logo.png" alt="Beoro Admin"></a></div>
                        </div>
                        <div class="span5">
                            <nav class="nav-icons">
                                <ul>
                                    <li><a href="javascript:void(0)" class="ptip_s" title="Dashboard"><i class="icsw16-home"></i></a></li>
                                    <li><a href="javascript:void(0)" class="ptip_s" title="Content"><i class="icsw16-create-write"></i></a></li>
                                    <li><a href="javascript:void(0)" class="ptip_s" title="Mailbox"><i class="icsw16-mail"></i><span class="badge badge-info">6</span></a></li>
                                    <li><a href="javascript:void(0)" class="ptip_s" title="Comments"><i class="icsw16-speech-bubbles"></i><span class="badge badge-important">14</span></a></li>
                                    <li class="active"><span class="ptip_s" title="Statistics (active)"><i class="icsw16-graph"></i></span></li>
                                    <li><a href="javascript:void(0)" class="ptip_s" title="Settings"><i class="icsw16-cog"></i></a></li>
                                </ul>
                             </nav>
                        </div>
                        <div class="span4">
                            <div class="user-box">
                                <div class="user-box-inner">
                                    <img src="img/avatars/avatar.png" alt="" class="user-avatar img-avatar">
                                    <div class="user-info">
                                        Welcome, <strong>Jonathan</strong>
                                        <ul class="unstyled">
                                            <li><a href="user_profile.html">Settings</a></li>
                                            <li>&middot;</li>
                                            <li><a href="login.html">Logout</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

        <!-- breadcrumbs -->
            <div class="container">
                <ul id="breadcrumbs">
                    <li><a href="javascript:void(0)"><i class="icon-home"></i></a></li>
                    <li><a href="javascript:void(0)">Content</a></li>
                    <li><a href="javascript:void(0)">Article: Lorem ipsum dolor...</a></li>
                    <li><a href="javascript:void(0)">Comments</a></li>
                    <li><span>Lorem ipsum dolor sit amet...</span></li>
                </ul>
            </div>
            
        <!-- main content -->
            <div class="container">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="w-box w-box-blue">
                            <div class="w-box-header">
                                <h4>Editable elements</h4>
                            </div>
                            <div class="w-box-content cnt_a">
                                <p><button class="btn btn-small" id="enable">Enable/Disable</button></p>
                                <table class="table table-bordered table-striped" id="user">
                                    <tbody> 
                                        <tr>         
                                            <td width="15%">Username</td>
                                            <td width="50%"><a data-original-title="Enter username" data-pk="1" data-type="text" id="username" href="#">superuser</a></td>
                                            <td width="35%"><span class="muted">Simple text field</span></td>
                                        </tr>
                                        <tr>         
                                            <td>First name</td>
                                            <td><a data-original-title="Enter your firstname" data-placeholder="Required" data-placement="right" data-pk="1" data-type="text" id="firstname" href="#"></a></td>
                                            <td><span class="muted">Required text field, originally empty</span></td>
                                        </tr>  
                                        <tr>         
                                            <td>Sex</td>
                                            <td><a data-original-title="Select sex" data-value="" data-pk="1" data-type="select" id="sex" href="#"></a></td>
                                            <td><span class="muted">Select, loaded from js array. Custom display</span></td>
                                        </tr>
                                        <tr>         
                                            <td>Group</td>
                                            <td><a data-original-title="Select group" data-source="/groups" data-value="5" data-pk="1" data-type="select" id="group" href="#">Admin</a></td>
                                            <td><span class="muted">Select, loaded from server. <strong>No buttons</strong> mode</span></td>
                                        </tr> 
                                        <tr>         
                                            <td>Status</td>
                                            <td><a data-original-title="Select status" data-source="/status" data-value="0" data-pk="1" data-type="select" id="status" href="#">Active</a></td>
                                            <td><span class="muted">Error when loading list items</span></td>
                                        </tr>       
                                        <tr>         
                                            <td>Plan vacation?</td>
                                            <td><a data-original-title="When you want vacation to start?" data-placement="right" data-pk="1" data-viewformat="dd.mm.yyyy" data-type="date" id="vacation" href="#">25.02.2013</a></td>
                                            <td><span class="muted">Datepicker</span></td>
                                        </tr>
                                        <tr>         
                                            <td>Date of birth</td>
                                            <td><a data-original-title="Select Date of birth" data-pk="1" data-template="D / MMM / YYYY" data-viewformat="DD/MM/YYYY" data-format="YYYY-MM-DD" data-value="1984-05-15" data-type="combodate" id="dob" href="#"></a></td>
                                            <td><span class="muted">Date field</span></td>
                                        </tr> 
                                        <tr>         
                                            <td>Setup event</td>
                                            <td><a data-original-title="Setup event date and time" data-pk="1" data-viewformat="MMM D, YYYY, HH:mm" data-format="YYYY-MM-DD HH:mm" data-template="D MMM YYYY  HH:mm" data-type="combodate" id="event" href="#"></a></td>
                                            <td><span class="muted">Datetime field</span></td>
                                        </tr>                     
                                        <tr>         
                                            <td>Comments</td>
                                            <td><a data-original-title="Enter comments" data-placeholder="Your comments here..." data-pk="1" data-type="textarea" id="comments" href="#">awesome<br>user!</a></td>
                                            <td><span class="muted">Textarea. Submit by ctrl+enter</span></td>
                                        </tr>                                     
                                        <tr>         
                                            <td>Fresh fruits</td>
                                            <td><a data-original-title="Select fruits" data-value="2,3" data-type="checklist" id="fruits" href="#"></a></td>
                                            <td><span class="muted">Checklist</span></td>
                                        </tr>  
                                        
                                        <tr>         
                                            <td>Address</td>
                                            <td><a data-original-title="Please, fill address" data-pk="1" data-type="address" id="address" href="#"></a></td>
                                            <td><span class="muted">Your custom input, several fields</span></td>
                                        </tr>                      
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>            </div>
            <div class="footer_space"></div>
        </div> 

    <!-- footer --> 
        <footer>
            <div class="container">
                <div class="row">
                    <div class="span5">
                        <div>&copy; Your Company 2012</div>
                    </div>
                    <div class="span7">
                        <ul class="unstyled">
                            <li><a href="#">First link</a></li>
                            <li>&middot;</li>
                            <li><a href="#">Second link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        
    <!-- Common JS -->
        <!-- jQuery framework -->
            <script src="js/jquery.min.js"></script>
        <!-- bootstrap Framework plugins -->
            <script src="bootstrap/js/bootstrap.min.js"></script>
        <!-- top menu -->
            <script src="js/jquery.fademenu.js"></script>
        <!-- top mobile menu -->
            <script src="js/selectnav.min.js"></script>
        <!-- actual width/height of hidden DOM elements -->
            <script src="js/jquery.actual.min.js"></script>
        <!-- jquery easing animations -->
            <script src="js/jquery.easing.1.3.min.js"></script>
        <!-- power tooltips -->
            <script src="js/lib/powertip/jquery.powertip-1.1.0.min.js"></script>
        <!-- date library -->
            <script src="js/moment.min.js"></script>
        <!-- common functions -->
            <script src="js/beoro_common.js"></script>

        <!-- Mockjax -->
            <script src="js/jquery.mockjax.js"></script>
        <!-- x-editable -->
            <script src="js/lib/x-editable/bootstrap-editable/js/bootstrap-editable.min.js"></script>
            <script src="js/lib/x-editable/inputs-ext/address/address.js"></script>

            <script src="js/pages/beoro_editable_elements.js"></script>

    </body>
</html>